<template>

  <div class="panel">
    <el-form v-loading="!detailData.dataReady" :model="detailData.detail" class="demo-form-inline" label-width="100px">

      <el-form-item label="标题">{{detailData.detail.title}}</el-form-item>

      <el-form-item label="正文">
        <div v-if="detailData.detail.text">{{detailData.detail.text}}</div>
        <div v-else class="isEmpty">无</div>
      </el-form-item>

      <el-form-item label="配图">
        <div v-if="detailData.detail.imageUrl">
          <el-image style="width: 320px;height:320px;display:block;" fit="contain" :src="detailData.detail.imageUrl" @click="detailFn.openImageViewer([detailData.detail.imageUrl],0)" />
        </div>
        <p v-else>--</p>
      </el-form-item>

      <el-form-item label="链接">{{detailData.detail.url}}</el-form-item>

      <el-form-item label="创建时间">{{detailData.detail.createdAt}}</el-form-item>

      <el-form-item label="推送时间">{{detailData.detail.sendAt}}</el-form-item>

      <el-form-item label="类型">{{detailData.detail.type===0?'定时':'实时'}}</el-form-item>

      <el-form-item label="状态">
        <span v-if="detailData.detail.status===0" style="color:#D9001B;">已停止</span>
        <span v-else-if="detailData.detail.status===2" style="color:#70B603;">待推送</span>
        <span v-else style="color:#9b9b9b;">已推送</span>
      </el-form-item>
      <!-- 状态  0、已停止；1、已推送；2、待推送 -->
      <el-form-item label="是否push">{{detailData.detail.isPush===0?'否':'是'}}</el-form-item>

      <el-form-item style="text-align:center">
        <template v-if="detailData.dataReady && hasPermission(['operation:message'])">
          <el-button v-if="detailData.detail.status===2" type="warning" plain @click="stopFn.sureStop(detailData.detail.id)">停止</el-button>
          <el-button v-if="detailData.detail.status!==1" type="primary" plain @click="detailFn.goToEditPage(detailData.detail.id)">编辑</el-button>
          <el-button type="danger" plain @click="deleteFn.sureDelete(detailData.detail.id)">删除</el-button>
        </template>
      </el-form-item>
    </el-form>
  </div>

</template>

<script setup>
import { reactive, ref, watch, watchEffect } from "vue";
import {
  getPullMessageDetail,
  updatePullMessageStatus,
  deletePullMessage,
} from "@/api/operation.js";
import { onBeforeRouteUpdate, useRouter } from "vue-router";
// import imageViewer from "@/components/imageViewer";
import { ElMessage, ElMessageBox } from "element-plus";
import { useStore } from "@/store";
import imageViewer from "@/components/imageViewer/index2";

const store = useStore();

const router = useRouter();
const params = ref({});
const query = ref({});
watchEffect(()=>{
  params.value = router.currentRoute.value.params;
})
watchEffect(()=>{
  query.value = router.currentRoute.value.query;
})

// 详情
const { $data: detailData, $fn: detailFn } = (() => {
  const $data = reactive({
    detail: {},
    dataReady: false, //数据是否已拿到
  });
  const $fn = {
    getDetails() {
      console.log("message detail:",params.value.id);
      if(!params.value.id)return;
      $data.dataReady = false;
      getPullMessageDetail(params.value.id).then((res) => {
        if (res.code === 0) {
          $data.dataReady = true;
          $data.detail = { ...res.data };
        }
      });
    },
    openImageViewer(list, index) {
      imageViewer({initialIndex: index,urlList: list});
    },
    goToEditPage(id){
      router.push(`/operation/messagePull/operate/${id}?type=edit`);
    }

  };
  return {
    $data,
    $fn,
  };
})();

// 停止
const { $fn: stopFn } = (() => {
  const $fn = {
    sureStop(id) {
      ElMessageBox.confirm("是否停止该消息推送？", "提示", {
        type: "warning",
      }).then(() => {
        updatePullMessageStatus(id).then(() => {
          ElMessage.success("操作成功");
          detailFn.getDetails();
        });
      });
    },
  };
  return {
    $fn,
  };
})();

// 删除
const { $fn: deleteFn } = (() => {
  const $fn = {
    sureDelete(id) {
      ElMessageBox.confirm("是否删除该消息推送？", "提示", {
        type: "error",
      }).then(() => {
        deletePullMessage(id).then(() => {
          ElMessage.success("操作成功");
          store.dispatch("tagsView/delView", { ...router.currentRoute.value }).then(() => {
            router.replace({ path: "/operation/messagePull" });
          });
        });
      });
    },
  };
  return {
    $fn,
  };
})();

function init(){
  detailFn.getDetails();
}
init();

// 从相同路由进入（params不同，query.view相同），如/a/b/1?view=1 => /a/b/2?view=1
onBeforeRouteUpdate((to, from, next) => {
  if(to.params.id !== from.params.id && to.query.view === from.query.view){
    params.value.id = to.params.id;
    query.value = to.query;
    init();
  }
  next();
});


</script>

<style scoped lang="scss">
.panel {
  background-color: #ffffff;
  padding: 12px;
  border-radius: 8px;
}
.isEmpty {
  color: rgb(172, 172, 172);
}
</style>